<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* 把块级元素转换为行内元素 */
    * {
        box-sizing: border-box; /* 这里会将内容减去外面的值 实际 一百 其实没有一百 盒子一直保持100 */
    }
    body{
        font-family: 'Muli', sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
        margin: 0;
    }
    .container{
        display: flex;
        width: 90vw;
    }
    .panel {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 80vh;
        border-radius: 50px;
        color: #fff;
        cursor: pointer;
        flex: 0.5;
        margin: 10px;
        position: relative;
        -webkit-transition: all 700ms ease-in;
    }
    .panel h3 {
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  opacity: 0;
}
.panel.active {
  flex: 5;
}

.panel.active h3 {
  opacity: 1;
  transition: opacity 0.3s ease-in 0.4s;
}

@media (max-width: 480px) {
  .container {
    width: 100vw;
  }

  .panel:nth-of-type(4),
  .panel:nth-of-type(5) {
    display: none;
  }
}
    </style>
</head>
<body>
    <!-- 这个案例做的事图片点击可以来回切换的效果 -->
    <!-- 思路 写三个会计元素 处理这个是这个图片的问题 -->
    <div class="container">
        <div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
          <h3>Explore The World</h3>
        </div>
        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
          <h3>Wild Forest</h3>
        </div>
        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
          <h3>Sunny Beach</h3>
        </div>
        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
          <h3>City on Winter</h3>
        </div>
        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
          <h3>Mountains - Clouds</h3>
        </div>
      </div>
    
</body>
</html>
<script>
   const panels = document.querySelectorAll('.panel')
   panels.forEach((item)=>{
    item.addEventListener('click',()=>{
        removeActiveClasses()
        item.classList.add('active')
    })
   })
   function removeActiveClasses() {
    panels.forEach(panel => {
        panel.classList.remove('active')
    })
}
</script>